const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  // 打包地址变为相对地址，index.js引入其他资源的前缀地址
  // 。/可以让开发环境和生产环境都可以正常使用
  // 为了严谨一些，开发环境使用：‘/‘，生产环境使用：‘./’
  // 问题：有无代码可以让他自己识别当前运行环境
  // node里面有一个内置的环境变量：process.env.NODE_ENV
  // 他会根据你敲击的命令来使用不同的值
  // 如果敲击的是yarn serve ，process.env.NODE_ENV的值就是’development’字符串
  // 如果敲击的是yarn build ，process.env.NODE_ENV的值就是’production’字符串
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

  // 打包是瘦身
  // 此项作用是告诉webpack打包时排除这些包，不进行打包，这些包都是大概率不会改变的第三方库，将其放在cdn上
  // 一定要去修改掉引入的element变量的名称，因为cdn里的源码配置在ELEMENT这个变量上，要在使用的文件中改成这个大写的
  configureWebpack: {
    externals: (externals = {
      //基本格式：
      // ‘包名’：‘在项目中引入的名字’
      echarts: "echarts",
      vue: "Vue",
      "vue-router": "VueRouter",
      vuex: "Vuex",
      axios: "axios",
      dayjs: "dayjs",
      "element-ui": "ELEMENT",
      "vue-quill-editor": "VueQuillEditor",
      "vuex-persistedstate": "createPersistedState",
    }),
  },
  // chainWebpack(config) {
  //   // 注入cdn变量（打包时会执行）
  //   config.plugin('html').tap(args=>{
  //     // 参数对象添加属性叫cdn，值就是上面CDN对象
  //     args[0].cdn = cdn;//配置CDN给插件
  //     return args;
  //   })
  // },
});

// 我们虽然排除了第三方包
// 打包dist和开发环境都会使用这套配置，并排除第三方
// 生产环境，再打包时会以public/index.html作为模板生成dist/index.html,这是index.html中就有了那些cdn的地址
// 开发环境，public下的index.html，也有那些第三方的cdn地址，所以也能正常运行
// 但是第一次打开的速度回有点慢。所以开发环境还是想让webpack引入本地的node_modules下的第三方包
